<template>
  <div>
    <el-button @click="click(1)" type="primary">111</el-button>
    <el-button @click="click(2)" type="primary">222</el-button>
    <el-button @click="click(3)" type="primary">333</el-button>

    <XForm ref="XForm" :formData="formData" :formList="formList" label-width="110px">
      <template v-slot:btns>
        <el-button @click="onSubmit()" type="primary">立即创建</el-button>
        <el-button @click="reset">重 置</el-button>
      </template>

      <template v-slot:input="{ binds, prop }">
        <el-input v-bind="binds" v-model="formData[prop]" />
      </template>

      <template v-slot:select="{ binds, prop }">
        <el-select v-bind="binds" v-model="formData[prop]">
          <el-option v-for="item in ['区域一', '区域二']" :key="item" :label="item" :value="item" />
        </el-select>
      </template>
    </XForm>
  </div>

</template>

<script>
import { XForm } from '@/components/@fhsy/x-tool'
import XFiles3 from './components/x/XFiles3'
export default {
  components: {
    XForm,
    XFiles3
  },
  data () {
    return {
      dialogVisible: true,
      formList: [],
      formData: {}
    }
  },
  methods: {
    click (index) {
      this.$refs['XForm'].resetFields()
      if (index === 1) {
        this.formList = [
          { label: '活动名称1',
            prop: 'name',
            rules: [{ isNull: true }, { max: 10 }],
            change: val => {
              this.formData['name'] = val.replace(/\s+/g, '')
            }
          },
          { label: '照片墙1',
            prop: 'photoWall',
            type: 'XFiles',
            change: val => {
              console.log('val', val)
            },
            action: 'http://192.168.1.243:8181/api/file/upload/',
            rules: [
              { isNull: true }
            ],
            attrs: {
              resultKey: 'data',
              urlPrefix: 'http://192.168.1.243:8180',
              data: {
                id: 1
              },
              sizeMax: 5125
            }
          },
          { slot: 'btns' }
        ]
      } else if (index === 2) {
        this.formList = [
          { label: '活动名称2',
            prop: 'name',
            rules: [{ isNull: true }, { max: 10 }],
            change: val => {
              this.formData['name'] = val.replace(/\s+/g, '')
            }
          },
          { label: '照片墙2',
            prop: 'photoWall',
            type: 'XFiles',
            change: val => {
              console.log('val', val)
            },
            action: 'http://192.168.1.243:8181/api/file/upload/',
            rules: [
              { isNull: true }
            ],
            attrs: {
              resultKey: 'data',
              urlPrefix: 'http://192.168.1.243:8180',
              data: {
                id: 1
              },
              sizeMax: 5125
            }
          },
          { slot: 'btns' }
        ]
      } else if (index === 3) {
        this.formList = [
          { label: '活动名称3',
            prop: 'name',
            rules: [{ isNull: true }, { max: 10 }],
            change: val => {
              this.formData['name'] = val.replace(/\s+/g, '')
            }
          },
          { label: '照片墙3',
            prop: 'photoWall',
            type: 'XFiles',
            change: val => {
              console.log('val', val)
            },
            action: 'http://192.168.1.243:8181/api/file/upload/',
            rules: [
              { isNull: true }
            ],
            attrs: {
              resultKey: 'data',
              urlPrefix: 'http://192.168.1.243:8180',
              data: {
                id: 1
              },
              sizeMax: 5125
            }
          },
          { slot: 'btns' }
        ]
      }
    },
    onSubmit () {
      // 调用 XForm 的表单校验方法
      this.$refs['XForm'].validate(is => {
        if (!is) {
          this.$message.warning('请先完善表单信息')
          return false
        }
        this.$message(JSON.stringify(this.formData))
      })
    },
    reset () {
      this.$refs['XForm'].resetFields() // 调用 XForm 的重置方法
    }
  }
}
</script>
